<template>
    <view class="login">
        <image class="login-bg" src="https://daiyue.gzzhenyi.net/static/image/login/bg.png" mode="heightFix" />
        <view class="login-header">
            <van-icon name="arrow-left" color="#333333" @tap="toBar()" />
            <view class="login-header-title">验证手机号</view>
        </view>
        <view class="login-logo">
            <image src="https://daiyue.gzzhenyi.net/static/image/login/logo.png" mode="widthFix" />
        </view>
        <view class="login-btn">
            <button class="login-btn-top" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
                本机一键手机号验证
            </button>
            <button class="login-btn-bottom" @click="mobile">
                其他手机号验证
            </button>
            <view class="login-btn-line">
                <radio :value="isShow" color="#359BEF" style="transform:scale(0.7)" :checked="isShow"
                    @click="isShow = !isShow" />
                <span class="login-btn-line-text" @click="isShow = !isShow">我已阅读即时为同意</span>
                <span class="login-btn-line-a">《孕动伊栈会员-用户协议》</span>
            </view>
        </view>
    </view>

</template>
<script>
export default {
    data() {
        return {
            isShow: false
        }
    },
    methods: {
        getPhoneNumber(e) {
            console.log(e)
            if (!this.isShow) {
                uni.showToast({
                    title: '请先阅读即时为协议',
                    icon: 'none'
                })
                return
            }
        },
        mobile() {
            uni.navigateTo({ url: '/pages/login/register' })
        },
        toBar() {
            uni.navigateBack()
        }

    }
}
</script>

<style lang="scss" scoped>
.login {


    .login-bg {
        width: 100%;
        height: 1624upx;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

    .login-header {
        position: absolute;
        top: 105upx;
        left: 48%;
        transform: translateX(-50%);
        display: flex;
        width: 90%;

        .login-header-title {
            font-size: 30upx;
            color: #333333;
            display: flex;
            justify-content: center;
            margin: 0 auto;
        }
    }

    .login-logo {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);

        image {
            width: 350upx;
        }
    }

    .login-btn {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);

        .login-btn-top {
            width: 600upx;
            height: 100upx;
            border-radius: 50px;
            opacity: 1;
            background: linear-gradient(270deg, #6A91F6 0%, #009CF8 31%, #2AD9FC 100%);
            color: #fff;
            font-size: 30upx;
            text-align: center;
            line-height: 100upx;
            margin-bottom: 30upx;
        }



        .login-btn-bottom {
            width: 600upx;
            height: 100upx;
            border-radius: 50px;
            border: 1px solid #359BEF;
            color: #359BEF;
            font-size: 30upx;
            line-height: 100upx;
            text-align: center;
        }

        .login-btn-line {
            margin-top: 30upx;
            display: flex;
            align-items: center;

            .login-btn-line-text {
                color: #37363D;
                font-size: 22upx;
                font-weight: normal;
                // margin: 0 10upx;
                margin-right: 10upx;
            }

            .login-btn-line-a {
                color: #EBB234;
                font-size: 22upx;
                font-weight: normal;
            }
        }
    }
}
</style>